import React from "react";
import { findDOMNode } from "react-dom";
import "./index.less";

const [DOWN, UP] = ['down', 'up'];

export default class Toggle extends React.Component {
  constructor() {
    super();

    this.state = {
      status: DOWN,
      maxHeight: 500
    };
  }

  componentDidMount() {
    const dom = findDOMNode(this.content);

    setTimeout(() => {
      this.setState({
        maxHeight: dom.offsetHeight
      });
    });

  }

  onToggle() {
    const { status } = this.state;

    this.setState({
      status: status === DOWN ? UP : DOWN
    });
  }

  render() {
    const { status, maxHeight } = this.state;
    const { title, children } = this.props;

    return (
      <section className='edc-toggle'>
        <div className='toggle-header wea-f12' onClick={this.onToggle.bind(this)}>
          <span>{title}</span>
          <span>
            <i className={`icon-coms-${status}2`}></i>
          </span>
        </div>
        <div style={{ maxHeight }}
          className={`toggle-content ${status}`}
          ref={content => this.content = content}
        >
          {children}
        </div>
      </section>
    );
  }
}